<template>
	<view class="container">
		<view class="header">
			<dropDownMenu v-if="show" class="downMenu" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></dropDownMenu>
			<view class="total">数量：{{ total }}</view>
		</view>
		<view class="empty" v-if="list.length < 1">
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无数据</view>
		</view>
		<block v-else>
			<view class="list">
				<view class="box" hover-class="hoverClass" v-for="item in list" :key="item.lock_id" @click="goDetail(item)">
					<view class="info">
						<view class="name">
							{{ item.lock_alias }}
						</view>
						<view class="status">电量：{{ item.electric_quantity }}%</view>
					</view>
					<uni-icons type="right" size="16" color="#bbb"></uni-icons>
				</view>
			</view>
			<uni-pagination v-if="total > FormData.perpage" :total="total" :pageSize="FormData.perpage" :value="FormData.page" @change="changePage" />
		</block>
		<keyWord :words="FormData.keyword" @onChange="setKeyWord" />
		<view class="addBtn" @click="addGateway">
			<uni-icons type="plusempty" size="32" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			total: 0,
			FormData: {
				page: 1,
				perpage: 10,
				group_id: '',
				keyword: ''
			},
			list: [],
			titleArr: ['分组', ''],
			dropArr: [[]],
			show: false
		};
	},
	onPullDownRefresh() {
		this.getList();
	},
	onLoad() {
		this.show = false;
		this.getGroup();
	},
	onShow() {
		this.getList();
	},
	methods: {
		finishClick(resultData) {
			this.FormData.group_id = resultData[0];
			this.FormData.page = 1;
			this.getList();
		},
		setKeyWord(e) {
			this.FormData.keyword = e;
			this.getList();
		},
		changePage(e) {
			this.FormData.page = e.current;
			this.getList();
		},
		addGateway() {
			uni.navigateTo({
				url: '/pageA/gateway/search'
			});
		},
		goDetail(item) {
			// uni.navigateTo({
			// 	url: '/pages/lock/detail?id=' + item.lock_id
			// });
		},
		getList() {
			// api.lockList(this.FormData).then((res) => {
				// this.list = res.data.items;
				// this.total = res.data.total;
			// });
			uni.stopPullDownRefresh();
		},
		getGroup() {
			api.groupList({}).then((data) => {
				let list = data.data;
				let arr = [];
				for (let i = 0; i < list.length; i++) {
					let base = {
						text: list[i].group_name,
						value: list[i].tt_group_id
					};
					arr.push(base);
				}
				let all = {
					text: '全部',
					value: ''
				};
				arr.unshift(all);
				this.dropArr[0] = arr;
				this.show = true;
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	.empty {
		.btn {
			margin-top: 100rpx;
		}
	}
	.header {
		.total {
			width: 50%;
		}
	}
	.list {
		padding: 20rpx;
		.box {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			.info {
				.name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.status {
					font-size: 26rpx;
					color: $uni-base-color;
				}
			}
		}
	}
}
</style>
